<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    li {
      display: flex;
      border: 1px solid #000;
    }
    img {
      width: 40px;
      height: 40px;
    }
  </style>
</head>
<body>
  <h2>Node.js页面</h2>
  <ul>
    
  </ul>

  <script>
    // 进入页面需要先请求后端数据

    const base_url = "https://i.maoyan.com/api/mmdb/movie/v3/list/hot.json?ct=%E8%A5%BF%E5%AE%89&ci=42&channelId=4";
    const request = (url) => {
      // 封装fetch的时候，因为fetch本身返回的就是promise实例，所以不需要new Promise了，也不需要resolve了
      return fetch(base_url + url)
        .then(response => response.json())
        .then(res => {
          return res;
        })
    }

    const getListData = async () => {
      // 解构赋值
      // { success: true, data: [] }
      const { data } = await request("/");
      console.log(data); // data是一个40项的数组
      let str = "";
      data.forEach(item => {
        str += `<li>
            <img src=${item.author.avatar_url} />
            <span>${item.title}</span>
          </li>`
      })
      document.querySelector("ul").innerHTML = str;
    }
    getListData()
  </script>
</body>
</html>